<template>
  <div>
    child1组件 - {{ count }} - {{ name }} - {{ age }} - {{ address }} -
    {{ doubleNum }}
  </div>
</template>

<script>
// mapState 辅助函数 用于简化计算属性的写法
import { mapState } from "vuex";
export default {
  data() {
    return {
      jiedao: "九和路",
      num: 9,
    };
  },

  // computed: {
  //   count2() {
  //     return this.$store.state.count;
  //   },
  //   name() {
  //     return this.$store.state.name;
  //   },
  //   age() {
  //     return this.$store.state.age;
  //   },
  //   address() {
  //     return this.$store.state.address;
  //   },
  //   doubleNum() {
  //     return this.num * 2;
  //   },
  // },

  // 数组语法
  computed: {
    ...mapState(["count", "name", "age", "address"]),
    doubleNum() {
      return this.num * 2;
    },
  },

  // 对象语法
  // computed: mapState({
  //   count2: (state) => state.count,
  //   name: "name",
  //   age: (state) => state.age,
  //   // 娶不到this
  //   // address: (state) => state.address + this.jiedao,
  //   address(state) {
  //     return state.address + this.jiedao;
  //   },
  // }),
};
</script>
